<template>
  <div class="user-info">
    <loading v-if="!userData"></loading>
    <nodata v-else-if="!userData._id"></nodata>
    <div v-else class="wrapper">
      <div class="info">
        <div class="user-info-data">
          <div class="left">
            <img :src="userData.coverUrl | squareUrls" alt />
          </div>
          <div class="right">
            <div class="name">
              <span>{{userData.name}}</span>
              <el-button size="mini" v-if="userName !== userData.userName" @click="sendMessage()">私信</el-button>
            </div>
            <div class="time">
              <span>性别：{{userData.sex}}</span>
              <span>加入时间：{{userData.created | setDate}}</span>
            </div>
            <div class="dec" v-if="userData.declaration.length">宣言：{{userData.declaration[0].text}}</div>
          </div>
        </div>
        <div class="class-data">
          <el-tabs type="border-card">
            <el-tab-pane label="技术文章" class="skill">
              <ul>
                <li v-for="data in userData.skill" :key="data._id">
                  <div class="label" @click="gotoSkillPage(data._id)">
                    <span>{{data.name}}</span>-
                    <span class="strong">{{data.label}}</span>
                  </div>
                  <div class="tags" v-if="data.tags.length && data.tags[0]">
                    <el-tag v-for="tag in data.tags" size="mini" :key="tag.id">{{tag}}</el-tag>
                  </div>
                  <div class="time">
                    <span>创建时间：{{data.created | setDate}}</span>
                    <span>更新时间：{{data.updated | setDate}}</span>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="日志" class="rz">
              <ul>
                <li v-for="data in userData.rz" :key="data._id">
                  <div class="rz-left" @click="gotoRzPage(data._id)">
                    <img :src="data.url | squareUrls" alt />
                  </div>
                  <div class="rz-right">
                    <div class="label" @click="gotoRzPage(data._id)">{{data.label}}</div>
                    <div class="time">
                      <span>创建时间：{{data.created | setDate}}</span>
                      <span>更新时间：{{data.updated | setDate}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="说说" class="ss">
              <ul>
                <li class="ss-data" v-for="data in userData.ss" :key="data._id">
                  <div class="label">{{data.label}}</div>
                  <div class="time">
                    <span>创建日期：{{data.created | setDate}}</span>
                    <span>修改日期：{{data.updated | setDate}}</span>
                  </div>
                  <div class="body">{{data.body}}</div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="音乐收藏" class="music">
              <ul>
                <li
                  v-for="(data,index) in musicData"
                  :key="data._id"
                  @click="addSingerList(data.data,index)"
                  :class="index===musicIndex? 'active': ''"
                >
                  <span class="name">{{data.data.name}}</span>
                  <div class="ar">
                    <span v-for="ar in data.data.ar" :key="ar.id">{{ar.name}}</span>
                  </div>
                  <span class="dt">{{data.data.dt | toStringMusicTime}}</span>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
        <recommend :recommendData="recommendData" />
      </div>
      <div class="aside">
        <div class="data-number">
          <ul>
            <li>
              <h4>说说</h4>
              <p>{{ userData.ssDataNumber }}</p>
            </li>
            <li>
              <h4>日志</h4>
              <p>{{ userData.rzDataNumber }}</p>
            </li>
            <li>
              <h4>照片</h4>
              <p>{{ userData.photosNumber }}</p>
            </li>
            <li>
              <h4>相册</h4>
              <p>{{ userData.albumNumber }}</p>
            </li>
            <li>
              <h4>视频</h4>
              <p>{{ userData.videoNumber }}</p>
            </li>
            <li>
              <h4>视频库</h4>
              <p>{{ userData.videosNumber }}</p>
            </li>
            <li>
              <h4>技术文章</h4>
              <p>{{ userData.skillNumber }}</p>
            </li>
            <li>
              <h4>积分</h4>
              <p>{{ userData.integral }}</p>
            </li>
            <li>
              <h4>会员等级</h4>
              <p>{{ userData.class }}</p>
            </li>
            <li>
              <h4>账号状态</h4>
              <p>{{ userData.state ===0 ? "正常" : "异常" }}</p>
            </li>
          </ul>
          <div class="qd" v-if="userData.qd.length">
            <span>签到次数： {{userData.qd.length}}</span>
            <span class="qian">签</span>
          </div>
        </div>
        <expert />
        <bei></bei>
      </div>
    </div>
  </div>
</template>

<script>
import { musicApi } from "@/public/uri.js";
import recommend from "@/components/comment/recommend";
import expert from "@/components/comment/expert.vue";
import { mapState, mapActions, mapMutations } from "Vuex";
export default {
  name: "user-info",
  components: {
    recommend,
    expert
  },
  data() {
    return {
      id: "",
      userData: "",
      limit: 10,
      skip: 0,
      recommendData: "",
      musicData: "",
      musicIndex: -1
    };
  },
  activated() {
    this.id = this.$route.params.id;
  },
  watch: {
    id() {
      if (this.id) {
        this.init();
      }
    },
    $route(now, pre) {
      if (now.name === "/userinfo_id" && pre.name === "/userinfo_id") {
        this.id = this.$route.params.id;
      }
    }
  },
  computed: {
    ...mapState("user", ["userName", "userInfoData", "allUserData"])
  },
  methods: {
    addSingerList(data, index) {
      this.musicIndex = index;
      if (data.fee === 1) {
        this.$message({
          message: "暂时不支持vip歌曲的播放！",
          type: "warning"
        });
        return;
      }
      let id = data.id;
      let url = "song/url";
      this.addSingData(data);
      this.$axios
        .get(`${musicApi}/${url}`, {
          params: {
            id
          }
        })
        .then(res => {
          if (res.data.code === 200) {
            this.addSingList(res.data.data);
          }
        })
        .catch(err => {
          console.log("程序错误:" + err);
        });
    },
    init() {
      this.userData = "";
      this.musicData = "";
      this.lookUserInfo({ _id: this.id })
        .then(res => {
          this.userData = res.data.data;

          this.getUserMusicList({ user_id: res.data.data.userName })
            .then(res => {
              if (res.data.ok) {
                this.musicData = res.data.data.reverse();
              } else {
                this.musicData = [];
              }
            })
            .catch(err => {
              console.log("错误信息：" + err);
            });

          this.getRecommendSkill({
            limit: this.limit,
            skip: this.skip,
            userName: this.userData.userName
          })
            .then(res => {
              this.recommendData = res.data.data;
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(err => {
          this.userData = {};
          console.log(err);
        });

      this.getAllUserData({ limit: 3, skip: 0 });
    },
    gotoSkillPage(id) {
      // 跳转到skill页面
      this.$router.push("/article/" + id);
    },
    gotoRzPage(id) {
      this.$router.push("/rz/" + id);
    },
    sendMessage() {
      // 给文章作者发送留言
      if (this.userName) {
        this.$prompt("请输入要发送的内容", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            if (value) {
              this.sendMessageToUser({
                text: value,
                sendUserName: this.userInfoData.userName || this.userName,
                userName: this.userData.userName,
                sendCoverUrl: this.userInfoData.coverUrl || ""
              })
                .then(res => {
                  this.$alert(res.data.data);
                })
                .catch(err => {
                  console.log("错误信息：" + err);
                });
            } else {
              alert("检测内容为空，未提交数据！");
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        alert("你还未登录，无法给作者留言！");
      }
    },
    ...mapActions("user", [
      "lookUserInfo",
      "getRecommendSkill",
      "sendMessageToUser",
      "getUserInfoInSkill",
      "getAllUserData"
    ]),
    ...mapActions("music", ["getUserMusicList"]),
    ...mapMutations("music", ["addSingList", "addSingData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.user-info
  width: 100%
  height: 100%
  background-color: #eee
  padding: 20px 0
  min-height: 93vh
  .wrapper
    width: 1280px
    height: 100%
    margin: 0 auto
    @include flex(space-between,flex-start)
    .info
      flex: 0 0 70%
      overflow: hidden
      .user-info-data
        width: 100%
        padding: 0 20px 
        height: 120px
        background-color: #fff
        overflow: hidden
        @include flex(space-between,center)
        .left
          flex: 0 0 86px
          height: 86px
          overflow: hidden
          border-radius: 10px
          @include flex(center,center)
          >img
            width: 100%
            height: auto
        .right
          flex: 1
          padding-left: 20px 
          overflow: hidden
          .name
            height: 40px
            line-height: 40px
            @include flex(space-between,center)
            >span
              color: #333
              font-size: 21px
              font-weight: 700
          .time
            width: 100%
            height: 30px
            line-height: 30px
            @include flex(space-between, center)
            >span
              display: block
          .dec
            width: 100%
            height: 22px
            line-height: 22px
            color: #999
            @include text-overflow()
      .class-data
        margin-top: 10px
        width: 100%
        background-color: #fff
        .el-tabs
          width: 100%
          .skill
            width: 100%
            >ul
              width: 100%
              padding: 0 10px 
              >li
                width: 100%
                border-bottom: 1px solid #eee
                margin-bottom: 10px                
                .label
                  width: 100%
                  height: 30px
                  line-height: 30px
                  cursor: pointer
                  &:hover
                    color: #eb2001
                  .strong
                    color: #333
                    font-weight: 700
                .tags
                  width: 100%
                  height: 24px
                  overflow: hidden
                  @include flex(flex-start,center)
                  .el-tag
                    margin-right: 10px
                .time
                  line-height: 20px
                  height: 30px
                  overflow: hidden
                  @include flex(space-between, center)
                  >span
                    display: block
                &:last-child
                  border: none
          .rz
            width: 100%
            >ul
              width: 100%
              padding: 0 10px
              >li
                width: 100%
                padding: 10px 0                
                border-bottom: 1px solid #eee
                @include flex(flex-start,center)
                .rz-left
                  flex: 0 0 68px
                  height: 48px
                  border-radius: 5px
                  overflow: hidden
                  cursor: pointer
                  transition: all .3s
                  @include flex(center,center)
                  &:hover
                    box-shadow: 2px 2px 4px rgba(0,0,0,.2)
                    transition: all .3s
                  >img
                    width: 100%
                    height: auto
                .rz-right
                  flex: 1
                  padding-left: 20px
                  .label
                    width: 100%
                    height: 30px
                    line-height: 30px
                    cursor: pointer
                    &:hover
                      color: #eb2001
                  .time
                    width: 100%
                    height: 18px
                    line-height: 18px
                    @include flex(space-between,center)
                    >span
                      display: block
                &:last-child
                  border: none 
          .ss
            width: 100%
            >ul
              padding: 10px
              .ss-data
                width: 100%
                padding-bottom: 10px
                border-bottom: 1px solid #eee
                .label
                  line-height: 40px
                  height: 40px
                  overflow: hidden
                  font-size: 18px
                  color: #333
                .time
                  line-height: 30px
                  height: 30px
                  overflow: hidden
                  @include flex(space-between,center)
                  >span
                    display: block
                .body
                  width: 100%
                  line-height: 25px
                  color: #999
                &:last-child
                  border: none      
          .music 
            width: 100%
            >ul
              width: 100%
              padding: 10px
              >li
                width: 100%
                height: 30px
                cursor: pointer
                @include flex(flex-start,center)
                .name
                  flex: 0 0 60%
                  width: 60%
                  display: block
                .ar
                  flex: 0 0 35%
                  width: 35%
                  display: block
                  padding-right: 10px
                  @include text-overflow()                 
                  >span
                    &:after
                      content: "/"
                    &:last-child
                      &:after
                        content: ""
                .dt
                  flex: 0 0 5%
                &:hover:not(.active)
                  color: #eb2001
              .active
                color: #2eb037
    .aside
      flex: 1
      width: 100%  
      padding-left: 10px    
      position: sticky  
      top: 0
      .data-number
        width: 100%
        height: 250px
        background-color: #fff
        >ul
          width: 100%
          height: 180px
          padding: 5px
          @include flex(space-between,center)
          @include align(center)
          >li
            flex: 0 0 19%
            height: 70px
            text-align: center
            h4
              width: 100%
              line-height: 30px
            >p
              width: 100%
              line-height: 20px
              color: #eb2001
        .qd
          width: 100%
          height: 50px
          line-height: 30px
          background-color: #f9f9f9
          padding: 20px
          border-top: 1px solid #eee
          border-bottom: 1px solid #eee
          @include flex(space-between,center)
          .qian
            border-radius: 50%
            width: 24px
            height: 24px
            background-color: rgba(255,0,0,.2)
            color: #fff
            transition: all 1s
            cursor: pointer
            @include flex(center,center)
            &:hover
              transition: all 3s
              transform: rotate(360deg)
</style>